justenergy-onboarding-ux-api

Chase Framework Implementation

Screenshot showing Chase payment flow in Enrollment API:

In current system, it uses iframe to load the Chase Frame URL. See the screenshot of Enrollment API below:

Logic for creating the Chase Frame URL:

1. System generates iframe dynamically and calls a method SetChaseFrame(string enrollid, string WebServiceKey) that takes Enrollment ID and Web service key (auth token) as a parameters for setting up the source URL into the iframe.
2. In the method, it concatenates Chase URL with Web Service Key (auth token). URL is different as their hosted Secure ID is unique for each brand (1- Tara, 3- Amigo & 9 -JE). See below:-case "1": strurl = "https://webs.taraenergy.com/TESTWebs/chase/view/Apppayment.html?hostedSecureID=cpt879348631855SB=https://webs.taraenergy.com/TESTWebs/Chase/Css/MainCRM.css=[UniqueID]=Enroll_Api=[enrollID]=0.00=1=280=100%=" + WebServiceKey;

          break;case "3":              strurl = "[https://webs.taraenergy.com/TESTWebs/chase/view/Apppayment.html?hostedSecureID=cpt900145882507SB=https://webs.taraenergy.com/TESTWebs/Chase/Css/MainCRM.css=[UniqueID]=Enroll\_Api=[enrollID]=0.00=3=280=100%=](https://webs.taraenergy.com/TESTWebs/chase/view/Apppayment.html?hostedSecureID=cpt900145882507SB&cssURL=https://webs.taraenergy.com/TESTWebs/Chase/Css/MainCRM.css&uniqueID=[UniqueID]&appSource=Enroll_Api&enrollID=[enrollID]&amount=0.00&companyID=3&height=280&width=100%&webServiceKey=)" + WebServiceKey;
          break;case "9":              strurl = "[https://webs.taraenergy.com/TESTWebs/chase/view/Apppayment.html?hostedSecureID=cpt445421048533SB=https://webs.taraenergy.com/TESTWebs/Chase/Css/MainCRM.css=[UniqueID]=Enroll\_Api=[enrollID]=0.00=9=280=100%=](https://webs.taraenergy.com/TESTWebs/chase/view/Apppayment.html?hostedSecureID=cpt445421048533SB&cssURL=https://webs.taraenergy.com/TESTWebs/Chase/Css/MainCRM.css&uniqueID=[UniqueID]&appSource=Enroll_Api&enrollID=[enrollID]&amount=0.00&companyID=9&height=280&width=100%&webServiceKey=)" + WebServiceKey;
          break;

3. After that EnrollID is replaced with Enrollment Id and UniqureID with CompanyId + DateTime.Now.ToString("ddMMyyyyHHmmssfff") + random.Next(1, 99999) in the URL (see above text highlighted in Yellow).
4. Once URL is created then it adds a new attribute in the iframe.chaseIrameUrl = SetChaseFrame(txtEnrollmentID.Text, txtauthToken.Text); Iframe_Chase.Attributes.Add("src", chaseIrameUrl);
5. Then dynamic iframe get loaded on the View page.
6. When user does the payment it hits the source URL (highlighted in yellow “src”) and in return system gets the Customer Profile ID (token) and that token system further sends to iSigma API (See the flow diagram above).

Use the following code to handle the chase response on the client side of application: -

window.onload = function () {

if (window.addEventListener) {
    window.addEventListener("message", respMsg, false);
}
else {
    if (window.attachEvent) {
        window.attachEvent("onmessage", respMsg);
    }
}

}

var respMsg = function (e) {

var respData = eval("(" + e.data + ")");
var activePane = document.getElementById('MainContent_hdnActivepane').value;
var lblChaseError = document.getElementById('MainContent_lblChaseError');
var lblChaseError2 = document.getElementById('MainContent_lblChaseError2');
var lblChaseToken = document.getElementById('MainContent_lblChaseToken');
var lblChaseToken2 = document.getElementById('MainContent_lblChaseToken2');

if ((typeof (respData.error) !== 'undefined') && (respData.error !== null)) {
    if (activePane !== '' && activePane === 'Deposit') {
        if (typeof (lblChaseError) != 'undefined' && lblChaseError != null) {
            lblChaseError.innerHTML = respData.error;
        }
        if (typeof (lblChaseError2) != 'undefined' && lblChaseError2 != null) {
            lblChaseError2.innerHTML = "";
        }
    }
    else if (activePane !== '' && activePane === 'Enrollment') {
        if (typeof (lblChaseError) != 'undefined' && lblChaseError != null) {
            lblChaseError.innerHTML = "";
        }
        if (typeof (lblChaseError2) != 'undefined' && lblChaseError2 != null) {
            lblChaseError2.innerHTML = respData.error;
        }
    }
    else {
        lblChaseError.innerHTML = respData.error;
        lblChaseError2.innerHTML = respData.error;
    }
    return;
}
if ((typeof (respData.customerRefNum) !== 'undefined') && (respData.customerRefNum !== null)) {
    document.getElementById('MainContent_hdnToken').value = respData.customerRefNum;
    document.getElementById('MainContent_hdnNameOnCard').value = decodeURI(respData.name);
    document.getElementById('MainContent_hdnExpMonth').value = respData.expMonth;
    document.getElementById('MainContent_hdnExpYear').value = respData.expYear;
    document.getElementById('MainContent_hdnCardNumber').value = respData.ccNumber;
    document.getElementById('MainContent_hdnCardType').value = decodeURI(respData.ccType);

    //        document.getElementById('<%= lblEditName.ClientID%>').innerHTML = decodeURI(response.name);
    //        document.getElementById('<%= lblEditType.ClientID%>').innerHTML = decodeURI(response.ccType);
    //        document.getElementById('<%= lblEditCardNumber.ClientID%>').innerHTML = response.ccNumber;
    //        document.getElementById('<%= lblEditExpiry.ClientID%>').innerHTML = response.expMonth + " / " + response.expYear;

    if (activePane !== '' && activePane === 'Deposit') {
        lblChaseToken.innerHTML = respData.customerRefNum;
        if (typeof (lblChaseToken2) != 'undefined' && lblChaseToken2 != null) {
            lblChaseToken2.innerHTML = "";
        }
    }
    else if (activePane !== '' && activePane === 'Enrollment') {
        if (typeof (lblChaseToken) != 'undefined' && lblChaseToken != null) {
            lblChaseToken.innerHTML = "";
        }
        if (typeof (lblChaseToken2) != 'undefined' && lblChaseToken2 != null) {
            lblChaseToken2.innerHTML = respData.customerRefNum;
        }
    }
    else {
        lblChaseToken.innerHTML = respData.customerRefNum;
        lblChaseToken2.innerHTML = respData.customerRefNum;
    }
    return;
}

}